<template>
	<view class="home page-container">

		
		<!-- 顶部轮播 -->
		<swiper class="banner-swiper" 
				:indicator-dots="true" 
				:autoplay="true" 
				interval="3000" 
				circular
				:indicator-color="'rgba(255, 255, 255, 0.4)'" 
				:indicator-active-color="'#FFFFFF'">
			<swiper-item v-for="(item, index) in banners" :key="index" @tap="viewBannerDetail(item)">
				<view class="banner-item">
					<image :src="url+item.image" mode="aspectFill" class="banner-image"></image>
					<!-- 添加渐变遮罩 -->
					<view class="banner-overlay"></view>
					<view class="banner-content">
						<text class="banner-title">{{item.title}}</text>
						<text class="banner-desc">{{item.desc}}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 优雅的网格菜单 -->
		<view class="menu-section">
			<view class="menu-grid">
				<view class="menu-item" @click="handleSelectedClick">
					<view class="menu-icon-wrapper">
						<image src="/static/images/icon1.png" class="menu-icon"></image>
					</view>
					<text class="menu-text">甄选系列</text>
				</view>
				<view class="menu-item" @click="navigateTo('/pages/collection/collection')">
					<view class="menu-icon-wrapper">
						<image src="/static/images/icon2.png" class="menu-icon"></image>
					</view>
					<text class="menu-text">我的收藏</text>
				</view>
				<view class="menu-item" @click="goToPackages">
					<view class="menu-icon-wrapper">
						<image src="/static/images/icon4.png" class="menu-icon"></image>
					</view>
					<text class="menu-text">剧本杀分类</text>
				</view>
				<view class="menu-item" @click="handleSearchListClick">
					<view class="menu-icon-wrapper">
						<image src="/static/images/搜索 (1).png" class="menu-icon"></image>
					</view>
					<text class="menu-text">搜索🔍</text>
				</view>
			</view>
		</view>
		
		<!-- 推荐系列 -->
		<view class="recommend-section">
			<view class="section-header">
				<text class="section-title">精选推荐</text>
				<text class="view-more" @click="switchTab('/pages/category/category')">查看更多</text>
			</view>
			<scroll-view scroll-x class="recommend-scroll" show-scrollbar="false">
				<view class="recommend-list">
					<view class="recommend-item" 
						  v-for="(item, index) in recommendItems" 
						  :key="index" 
						  @click="viewDetail(item)">
						<image :src="url+item.images" mode="aspectFill" class="recommend-image"></image>
						<view class="recommend-info">
							<text class="recommend-name">{{item.title}}</text>
						
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 团队成员 -->
		<view class="team-section">
			<view class="section-header">
				<text class="section-title">CG成员</text>
		
			</view>
			<scroll-view scroll-x class="team-scroll" show-scrollbar="false">
				<view class="team-list">
					<view class="team-item" v-for="member in teamMembers" :key="member.id">
						<image :src="url+member.header" class="team-avatar"></image>
						<view class="team-info">
							<text class="team-name">{{member.username}}</text>
							<text class="team-role">{{getRoleName(member.role)}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="brand-story">
			<view class="story-content">
				<text class="story-title">cg团队介绍</text>
				<text class="story-text">剧本杀管理员CG团队专注于游戏的视觉表现与体验，确保剧情和角色生动呈现。他们由艺术总监、3D建模师、动画师等组成，负责角色与场景的建模、动画和特效制作。专业的CG设计提升玩家的沉浸感与参与度，推动游戏故事的发展，使每个环节更加引人入胜。通过精细的视觉效果，CG团队为剧本杀增添了独特的魅力与深度。</text>
			</view>
		</view>
	</view>
</template>

<script>
import API from '@/api/config.js'

export default {
	data() {
		return {
      url:'http://localhost:8080/download/',
			banners: [],
			recommendItems: [],
			teamMembers: [],
		}
	},
	methods: {
		navigateTo(url) {
			uni.navigateTo({ 
				url,
				fail: (err) => {
					console.error('导航失败:', err)
					uni.showToast({
						title: '页面跳转失败',
						icon: 'none'
					})
				}
			});
		},
		switchTab(url) {
			uni.switchTab({ url });
		},
		viewDetail(item) {
			uni.navigateTo({
				url: `/pages/jbs-detail/jbs-detail?id=${item.id}`
			}).catch(err => {
				// 添加错误处理
				uni.showToast({
					title: '页面跳转失败',
					icon: 'none'
				})
				console.error('页面跳转错误:', err)
			})
		},
		viewBannerDetail(item) {
			uni.navigateTo({
				url: `/pages/dress-detail/dress-detail?id=${item.id}`
			})
		},
		loadTopGowns() {
			uni.request({
				url: API.GOWN_LIST_TOP,
				success: (res) => {
					if (res.data.code === 200) {
						console.log(res.data)
						this.recommendItems = res.data.data
					}
				}
			})
		},
		loadBanners() {
			uni.request({
				url: API.BANNER_LIST,
				success: (res) => {
					if (res.data.code === 200) {
						this.banners = res.data.data
					}
				},
				fail: (err) => {
					uni.showToast({
						title: '加载轮播图失败',
						icon: 'none'
					})
					console.error('加载轮播图错误:', err)
				}
			})
		},
		loadTeamMembers() {
			uni.request({
				url: API.USER_LIST_TOP,
				success: (res) => {
					if (res.data.code === 200) {
						// 过滤掉普通用户,只显示特殊角色
						this.teamMembers = res.data.data.filter(member => 
						 member.role > 1
						)
					}
				}
			})
		},
		goToPackages() {
			// 先设置默认分类
			try {
				uni.setStorageSync('defaultCategory', '套装');
				
				uni.reLaunch({
					url: '/pages/category/category',
					success: () => {
						console.log('成功跳转到分类页面');
					},
					fail: (err) => {
						console.error('跳转到套装分类失败:', err)
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						})
					}
				});
			} catch (error) {
				console.error('操作失败:', error);
			}
		},
		handleSearchListClick() {
      uni.navigateTo({
        url: '/pages/searchList/searchList'
      })
		},
		handleSelectedClick() {
			uni.switchTab({
				url: '/pages/selected/selected',
				fail: (err) => {
					console.error('跳转到甄选系列失败:', err)
					uni.showToast({
						title: '页面跳转失败',
						icon: 'none'
					})
				}
			});
		},
		getRoleName(role) {
			const roles = {
				2: '店员',
				3: '管理员',
			}
			return roles[role] || '未知角色'
		}
	},
	onLoad() {
    this.url = API.BASE_URL_IMAGE
		this.loadBanners()
		this.loadTopGowns()
		this.loadTeamMembers()
	},
	onShow() {
		this.loadBanners()
		this.loadTopGowns()
		this.loadTeamMembers()
	}
}
</script>

<style scoped>
	.banner-swiper {
		height: 400rpx;
		margin: 20rpx 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.2);
	}
	.banner-item {
		position: relative;
		width: 100%;
		height: 100%;
	}
	.banner-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.banner-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 40rpx;
		background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.3));
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	.banner-title {
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: 600;
		margin-bottom: 8rpx;
		display: block;
		text-shadow: 0 2px 4px rgba(0,0,0,0.2);
	}
	.banner-desc {
		font-size: 24rpx;
		color: rgba(255,255,255,0.9);
		text-shadow: 0 2px 4px rgba(0,0,0,0.2);
	}
	.menu-section {
		margin: 0rpx 30rpx 30rpx;
		position: relative;
		z-index: 1;
	}
	.menu-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
		padding: 30rpx;
		background: var(--card-bg);
		border-radius: 20rpx;
		box-shadow: 0 4rpx 30rpx rgba(0,0,0,0.1);
	}
	.menu-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12rpx;
	}
	.menu-icon-wrapper {
		width: 100rpx;
		height: 100rpx;
		background: var(--secondary-color);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: transform 0.3s;
	}
	.menu-icon {
		width: 60rpx;
		height: 60rpx;
	}
	.menu-text {
		font-size: 24rpx;
		color: var(--text-color);
	}
	.menu-item:active .menu-icon-wrapper {
		transform: scale(0.95);
	}
	.recommend-section {
		padding: 30rpx;
	}
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}
	.section-title {
		font-size: 36rpx;
		color: var(--text-color);
		font-weight: 600;
	}
	.view-more {
		font-size: 26rpx;
		color: var(--text-light);
	}
	.recommend-scroll {
		width: 100%;
	}
	.recommend-list {
		display: flex;
		padding: 10rpx 0;
	}
	.recommend-item {
		flex-shrink: 0;
		width: 300rpx;
		margin-right: 30rpx;
		border-radius: 16rpx;
		overflow: hidden;
		background: var(--card-bg);
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
	}
	.recommend-image {
		width: 300rpx;
		height: 400rpx;
	}
	.recommend-info {
		padding: 20rpx;
	}
	.recommend-name {
		font-size: 28rpx;
		color: var(--text-color);
		margin-bottom: 8rpx;
		display: block;
	}
	.recommend-price {
		font-size: 32rpx;
		color: #FFFFFF;
		font-weight: bold;
	}
	.team-section {
		padding: 30rpx;
		margin-bottom: 30rpx;
	}
	.team-scroll {
		width: 100%;
		white-space: nowrap;
	}
	.team-list {
		display: inline-flex;
		padding: 10rpx 0;
	}
	.team-item {
		flex-shrink: 0;
		width: 200rpx;
		margin-right: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: var(--card-bg);
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
	}
	.team-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin-bottom: 16rpx;
		border: 4rpx solid rgba(224, 176, 128, 0.3);
	}
	.team-info {
		text-align: center;
	}
	.team-name {
		font-size: 28rpx;
		color: var(--text-color);
		margin-bottom: 8rpx;
		display: block;
		font-weight: 500;
	}
	.team-role {
		font-size: 24rpx;
		color: var(--text-light);
		display: block;
	}
	.brand-story {
		margin-top: 0;
	}
	.story-title {
		margin-left: 30rpx;
		font-size: 36rpx;
		color: var(--text-color);
		margin-bottom: 20rpx;
		display: block;
		font-weight: 600;
	}
	.story-text {
		padding: 10rpx 30rpx;
		font-size: 28rpx;
		color: var(--text-light);
		line-height: 1.6;
		margin-bottom: 30rpx;
		display: block;
	}
	.story-btn {
		width: 240rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
		border: none;
	}
	.story-btn:active {
		opacity: 0.9;
	}
	.search-bar {
		margin: 20rpx 30rpx;
		position: relative;
		display: flex;
		align-items: center;
	}
	.search-bar input {
		flex: 1;
		height: 72rpx;
		background: #F5F5F5;
		border-radius: 36rpx;
		padding: 0 60rpx;
		font-size: 28rpx;
	}
	.search-icon {
		position: absolute;
		left: 20rpx;
		font-size: 32rpx;
		color: #999;
	}
	.banner-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50%;
		background: linear-gradient(transparent, rgba(0,0,0,0.6));
	}
</style>
